import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile';
import { getSubject } from './../../api'

class Com extends Component {
  state={
    activitylist: {},
    activities: []
  }
  componentDidMount(){
    getSubject().then(res=>{
      // console.log(res)
      this.setState({
        activitylist: res.data.data,
        activities: res.data.data.activities
      })
    })
   
  }
  render() {
    return (
      <div className='box'>
        {/* 头部 */}
        <header className='header'>
          <NavBar
            mode="light"
            icon={ <span className="iconfont icon-fanhui" style={{ fontSize: '0.23rem', color: '#00B145' }}></span>}
            onLeftClick={() => {
              this.props.history.go(-1)
            }}
            rightContent={[
              <Icon key="0" type="ellipsis" color='#00B145' style={{ marginRight: '0.13rem' }} />
            ]}
            >Top榜单人气榜
          </NavBar>
        </header>
        <div className="content" 
        style={{
          position: 'relative'
        }}
        >
          <img src="/images/background.png" alt="" style={{width: '3.75rem',}}/>
          <p style={{
            width:'1.56rem',
            height:'0.32rem',
            fontSize:'0.19rem',
            fontWeight:'600',
            color:'rgba(255,255,255,1)',
            lineHeight:'0.32rem',
            position: 'absolute',
            textAlign: 'center',
            left: '50%',
            marginLeft: '-0.78rem',
            top: '1.32rem',
          }}>{ this.state.activitylist.title}</p>
          {/* 展览图 */}
          <div className='acs' style={{
            position: 'absolute',
            margin: '0 0.15rem',
            top: '3.19rem',
            display: 'flex',
            flexWrap: 'wrap',
            justifyContent: 'space-between'
          }}>
            {
              this.state.activities.map(item=>{
                return <div style={{backgroundColor: '#fff', margin: '0.07rem 0'}} key={item.aid} >
                  <img style={{
                    width: '1.65rem',
                    height: '1.09rem'
                  }} src={item.img} alt=""/>
                  <p style={{
                    padding: '0.08rem',
                    width: '1.48rem',
                    fontSize: '0.12rem',
                    fontWeight: '500',
                    color:'rgba(51,51,51,1)',
                    lineHeight: '0.16rem',
                  }}>{item.detail}</p>
                  <i style={{
                    margin: ' 0 0.08rem',
                    width: '1.48rem',
                    display: 'block',
                    border: '1px dashed #ccc'
                  }}></i>
                  <p style={{
                    padding: '0.08rem',
                    width: '1.48rem',
                    fontSize: '0.16rem',
                    fontWeight: '500',
                    color:'#D93219',
                    lineHeight: '0.16rem',
                    textAlign: 'right'
                  }}>{item.price} <span style={{fontSize: '0.12rem',
                  color: '#999999'}}>元起</span></p>
                </div>
              })
            }
          </div>
        </div>
      </div>
    );
  }
}

export default Com
